<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_fgb_extent"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
  </head>
  <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="width: 100%; height: 100%"></div>
    <script type="text/javascript">
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io',
        url = host + '/iserver/services/map-china/rest/maps/China_4326';
      var fgbUrl = 'https://iclient.supermap.io/minio/fgb/waterways.fgb';
      var map;
      map = new ol.Map({
        target: 'map',
        // ol v7版本用法为ol.control.defaults.defaults； v6版本以下用法为ol.control.defaults
        controls: ol.control.defaults.defaults({ attributionOptions: { collapsed: false } })
          .extend([new ol.supermap.control.Logo({ link: "https://iclient.supermap.io" })]),
        view: new ol.View({
          center: [116.3966453552246, 39.91313934326172],
          zoom: 9,
          projection: 'EPSG:4326',
          multiWorld: true
        })
      });
      window.map = map;
      var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
          url
        }),
        projection: 'EPSG:4326'
      });
      map.addLayer(layer);
      const vectorSource = new ol.source.FGB({
        url: fgbUrl,
        strategy: ol.loadingstrategy.bbox
      });

      var fgbLayer = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: '#38f',
            width: 2
          })
        })
      });
      map.addLayer(fgbLayer);
    </script>
  </body>
</html>
